import React, { useState } from 'react'
import { Space, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';


import SearchForm from '@/components/Form/SearchForm';
import TableList from '@/components/TableList/TableList';

import { searchList, buttonList } from "./option"
import UserApi from './api/userApi';

const userApi = new UserApi()

export default function user() {

    const columns: ColumnsType<any> = [
        {
            title: '序号',
            render: (text, record, index) => `${index + 1}`,
        },
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={() => modify(record)}>编辑</a>
                    <a onClick={() => deleteUser(record.id)}>删除</a>
                </Space>
            ),
        },
    ];

    // 列表数据
    const [data, setData] = useState<any[]>();
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0
    })

    //监听翻页数据变化
    const pageChange = (current: number, pageSize: number) => {
        let page = pagination
        page.current = current
        page.pageSize = pageSize
        setPagination(page)
        getData()
    }
    const currentChange = (current: number) => {
        let page = pagination
        page.current = current
        setPagination(page)
        getData()
    }

    // 删除
    const deleteUser = (id: string) => {

    }

    // 编辑
    const modify = (record: any) => {

    }

    const getData = (value?: any) => {
        let params = {
            data: value,
            current: pagination.current,
            pageSize: pagination.pageSize
        }
        userApi.userList(params).then((res) => {
            console.log(res);
        })
    }

    // 点击筛选
    const onQuery = (values: any) => {
        getData(values)
    };

    // 新增
    const onAdd = () => {
        // setDialogData({
        //     dialogVisible: true,
        //     title: '新增',
        //     data: {}
        // })
    };

    return (
        <div>
            {/* 搜素栏 */}
            <SearchForm searchList={searchList} buttonList={buttonList} onQuery={onQuery}>
                <Button type="primary" htmlType="button" onClick={onAdd} style={{ marginLeft: 20 }}>
                    新增
                </Button>
            </SearchForm>

            {/* 数据列表 */}
            <TableList columns={columns} initData={data} pagination={pagination} pageChange={pageChange} currentChange={currentChange}></TableList>
        </div>
    )
}
